<template>
  <div class="drawer-box">
    <dw-drawer ref="dwDrawerRef" :size="1024" title="API接口调用工具">
      <template #header> API接口调用工具 </template>
      <div style="height: 100%; overflow: auto">
        <div style="height: 50px; line-height: 50px; display: flex; justify-content: end; padding-right: 30px; align-items: center">
          <el-button type="success" @click="run">执行</el-button>
        </div>
        <el-form :model="apiRunParam">
          <el-descriptions border :column="2">
            <el-descriptions-item label="接口类型" label-align="right" label-width="120px">
              <el-select v-model="requestType" placeholder="Select" style="width: 250px">
                <el-option v-for="item in requestTypeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions border :column="2">
            <el-descriptions-item label="调用地址" label-align="right" label-width="120px">
              <div style="width: 100%; display: flex; justify-content: space-between">
                <el-select v-model="apiRunParam.method" placeholder="Select" style="width: 120px" :show-arrow="false" :offset="2">
                  <el-option v-for="item in methodList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-input style="width: calc(100% - 130px)" v-model="apiRunParam.path"></el-input>
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions border :column="2">
            <el-descriptions-item label="完整调用地址" label-align="right" label-width="120px">
              <label v-text="fullPath"></label>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions border :column="2" class="demo11111">
            <el-descriptions-item label="请求参数" label-align="right" label-width="120px">
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane name="first">
                  <template #label>
                    <el-badge :value="1" class="item" type="primary" size="small" :offset="[8, 2]"> 请求头 </el-badge>
                  </template>
                  <div style="width: calc(100% - 20px); height: 100%; margin: 0 auto">
                    <div style="width: 100%; display: flex; font-size: 14px">
                      <div style="width: 180px; padding: 2px 5px">参数名称</div>
                      <div style="padding: 2px 5px; width: 100%">值</div>
                      <div style="width: 30px; padding: 2px"></div>
                    </div>
                    <div style="width: 100%; display: flex; justify-items: center; align-items: center" v-for="(header, index) in headerList" :key="index">
                      <div style="width: 180px; padding: 0px 5px">
                        <el-input size="default" v-model="header.key" />
                      </div>
                      <div style="text-align: center; padding: 0px 5px; width: 100%">
                        <el-input v-model="header.value"></el-input>
                      </div>
                      <div style="width: 30px; text-align: center; padding: 0px 2px; text-align: center">
                        <el-icon class="remove"><Delete /></el-icon>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane name="sconed">
                  <template #label> 请求参数 </template>
                  <div style="width: calc(100% - 20px); height: 100%; margin: 0 auto">
                    <div style="width: 100%; display: flex; font-size: 14px">
                      <div style="width: 180px; padding: 2px 5px">参数名称</div>

                      <div style="padding: 2px 5px; width: 100%">值</div>
                      <!-- <div
                      style="
                        width: 200px;
                        padding: 2px 5px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                      "
                    >
                      <div>说明</div>
                      <div><el-button type="primary" size="small">批量录入</el-button></div>
                    </div> -->
                      <div style="width: 30px; padding: 2px"></div>
                    </div>
                    <div style="width: 100%; display: flex">
                      <div style="width: 180px; padding: 2px 5px"><el-input size="default" /></div>
                      <!-- <div style="width: 120px; padding: 2px 5px">
                      <el-select v-model="value" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div> -->
                      <div style="text-align: center; padding: 2px 5px; width: 100%">
                        <el-input></el-input>
                      </div>
                      <!-- <div style="width: 200px; text-align: center; padding: 2px 5px">
                      <el-input></el-input>
                    </div> -->
                      <div style="width: 30px; text-align: center; padding: 2px; text-align: center">
                        <el-icon class="remove"><Delete /></el-icon>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="PathVariable" name="third">
                  <div style="width: calc(100% - 20px); height: 100%; margin: 0 auto">
                    <div style="width: 100%; display: flex; font-size: 14px">
                      <div style="width: 180px; padding: 2px 5px">参数名称</div>

                      <div style="padding: 2px 5px; width: 100%">值</div>
                      <!-- <div
                      style="
                        width: 200px;
                        padding: 2px 5px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                      "
                    >
                      <div>说明</div>
                      <div><el-button type="primary" size="small">批量录入</el-button></div>
                    </div> -->
                      <div style="width: 30px; padding: 2px"></div>
                    </div>
                    <div style="width: 100%; display: flex">
                      <div style="width: 180px; padding: 2px 5px"><el-input size="default" /></div>
                      <!-- <div style="width: 120px; padding: 2px 5px">
                      <el-select v-model="value" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div> -->
                      <div style="text-align: center; padding: 2px 5px; width: 100%">
                        <el-input></el-input>
                      </div>
                      <!-- <div style="width: 200px; text-align: center; padding: 2px 5px">
                      <el-input></el-input>
                    </div> -->
                      <div style="width: 30px; text-align: center; padding: 2px; text-align: center">
                        <el-icon class="remove"><Delete /></el-icon>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="Body参数" name="fourth">
                  <div style="width: 100%; border-bottom: 1px dashed #ccc">
                    <el-radio-group v-model="bodyRequestType" style="margin-left: 30px; padding-bottom: 10px">
                      <el-radio value="1">none</el-radio>
                      <el-radio value="2">form-data</el-radio>
                      <el-radio value="3">x-www-form-urlencoded</el-radio>
                      <el-radio value="json">json</el-radio>
                      <el-radio value="5">xml</el-radio>
                    </el-radio-group>
                  </div>
                  <basic-editor ref="jsonRef" v-model="apiRunParam.requestBody" style="height: 100px"></basic-editor>
                </el-tab-pane>
              </el-tabs>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions border :column="2" class="demo11111">
            <el-descriptions-item label="返回值" label-align="right" label-width="120px">
              <div style="width: 100%; height: 38px; background-color: #f6f6f6; line-height: 38px">
                <div style="display: flex; justify-content: space-between; padding: 0 20px; width: calc(100% - 50px)">
                  <div>
                    <span style="font-weight: bold">状态码:</span><span>{{ runResult.responseCode }}</span>
                  </div>
                  <div>
                    <span style="font-weight: bold">响应时间(ms):</span><span>{{ runResult.elapsedTime }}</span>
                  </div>
                  <div>
                    <span style="font-weight: bold">响应大小(Byte):</span><span>{{ runResult.bodySize }}</span>
                  </div>
                </div>
              </div>
              <el-tabs v-model="activeName1" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane name="333">
                  <template #label> 响应体 </template>

                  <el-input style="width: 100%; border: 0" type="textarea" v-model="runResult.responseData" :rows="15"></el-input>
                </el-tab-pane>
                <el-tab-pane name="444">
                  <template #label> 响应头</template>
                  <el-input style="width: 100%; border: 0" type="textarea" v-model="runResult.responseHeaders" :rows="15"></el-input>
                </el-tab-pane>
                <el-tab-pane name="555">
                  <template #label> 请求头 </template>
                  <el-input style="width: 100%; border: 0" type="textarea" v-model="runResult.requestHeaders" :rows="15"></el-input>
                </el-tab-pane>
                <el-tab-pane name="666">
                  <template #label> 请求参数 </template>
                  <el-input style="width: 100%; border: 0" type="textarea" v-model="runResult.requestData" :rows="15"></el-input>
                </el-tab-pane>
              </el-tabs>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
      </div>
    </dw-drawer>
  </div>
</template>
<script setup lang="ts">
import DwDrawer from '@/components/drawer/index.vue';
import type { TabsPaneContext } from 'element-plus';
import { computed, ref } from 'vue';
import type { IRunParameter } from './api-debuger';
import BasicEditor from '@/components/code-editor/basic-editor/index.vue';
import { dwHttp } from '@/utils/http';
defineOptions({
  name: 'ApiDebugger',
});
const bodyRequestType = ref<string>('json');
const apiRunParam = ref<IRunParameter>({
  requestId: '',
  protocol: 'http',
  contextPath: '',
  domain: 'localhost',
  port: 8080,
  path: '1111',
  method: 'POST',
});
interface IRunResult {
  responseData: string;
  responseCode: string;
  requestHeaders: string;
  bodySize: string;
  requestData: string;
  responseHeaders: string;
  elapsedTime: string;
}
const runResult = ref<IRunResult>({
  responseData: '',
  responseCode: '',
  requestHeaders: '',
  bodySize: '',
  requestData: '',
  responseHeaders: '',
  elapsedTime: '',
});
const headerList = ref<Record<string, string>[]>([{ key: 'accept', value: 'application/json, text/plain, */*' }]);
const domain = window.location.host.split(':')[0];
const port = 8082; //apiRunParam.value.port
const fullPath = computed(() => {
  return `${apiRunParam.value.protocol}://${domain}:${port}${apiRunParam.value.contextPath}${apiRunParam.value.path}`;
});
const dwDrawerRef = ref();
const show = (runParameter?: IRunParameter) => {
  if (runParameter) {
    apiRunParam.value = runParameter;
  }
  dwDrawerRef.value.show();
};
const requestType = ref<string>('http');
const requestTypeList = [
  {
    value: 'http',
    label: 'HTTP Resetful API',
  },
  {
    value: 'webservice',
    label: 'HTTP Soap API (WebService)',
  },
];
const methodList = [
  {
    value: 'GET',
    label: 'GET',
  },
  {
    value: 'POST',
    label: 'POST',
  },
  {
    value: 'PUT',
    label: 'PUT',
  },
  {
    value: 'DELETE',
    label: 'DELETE',
  },
];

const activeName = ref('fourth');
const activeName1 = ref('333');

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const runing = ref<boolean>(false);
const run = () => {
  runing.value = true;

  const ws = new WebSocket(`ws://${domain}:${port}/admin-api/request/websocket?requestId=${apiRunParam.value.requestId}`);
  ws.onopen = function () {
    dwHttp({
      method: 'post',
      url: '/admin-api/jmeter/run',
      isSuccessTip: false,
      data: apiRunParam.value,
    }).finally(() => {
      runing.value = false;
    });
  };
  ws.onmessage = function (event) {
    runResult.value = JSON.parse(event.data) as IRunResult;

    console.log(runResult.value);
    // console.log(message)
    //...
    ws.close();
  };
};

defineExpose({ show });
</script>
<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin: 0;
  padding: 0 20px;
}
:deep(.el-drawer__body) {
  margin: 0;
  padding: 0;
}

:deep(.demo11111 .el-descriptions__cell:last-child) {
  padding: 0;
  padding-bottom: 20px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  padding-bottom: 0;
}
.demo-tabs :deep(.el-tabs__nav) {
  padding: 0 20px;
}
.remove {
  cursor: pointer;
  color: var(--el-color-primary);
  font-weight: bold;
  font-size: 18px;
}
.remove:hover {
  cursor: pointer;
  color: red;
}
</style>
